//项目根组件
import React, { Component } from 'react'

import { HashRouter, Route, Link } from "react-router-dom"

//导入需要的Ant Design的组件
import { Layout, Menu } from 'antd'
const { Header, Content, Footer } = Layout

//导入模块化的样式
import styles from './css/app.scss'

//导入路由相关的组件
import HomeContainer from './components/home/HomeContainer.jsx'
import AboutContainer from './components/about/AboutContainer.jsx'
import MovieContainer from './components/movie/MovieContainer.jsx'

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }

    componentWillMount(){
    }
    render() { 
        return (<HashRouter>
  <Layout className="layout" style={{height: "100%"}}>
    {/**关部区域 */}
    <Header>
      <div className={styles.logo} />
      <Menu
        theme="dark"
        mode="horizontal"
        defaultSelectedKeys={[window.location.hash.split('/')[1]]}
        style={{ lineHeight: '64px' }}
      >
        <Menu.Item key="home">
          <Link to="/home">首页</Link>
        </Menu.Item>
        <Menu.Item key="movie">
          <Link to="/movie/in_theaters/1">电影</Link>
        </Menu.Item>
        <Menu.Item key="about">
          <Link to="/about">关于</Link>
        </Menu.Item>
      </Menu>
    </Header>
    {/**主体区域 */}
    <Content style={{ backgroundColor:'#fff', flex: 1 }}>
      <Route path="/home" component={HomeContainer}></Route>
      <Route path="/movie" component={MovieContainer}></Route>
      <Route path="/about" component={AboutContainer}></Route>
    </Content>
    {/**底部区域 */}
    <Footer style={{ textAlign: 'center' }}>
      CC3688 @ 2018
    </Footer>
  </Layout>
        </HashRouter> );
    }
}
 
export default App;